/**
 * 父子组件通信
 * 1. 父组件向子组件传值
 * 2. 子组件向父组件传值
 * 3. 父组件向子组件传方法
 * 4. 子组件向父组件传方法
 */

import { useState, useEffect } from 'react'
import { Button } from 'tdesign-react'

import Leader from '@/pages/Practice/ComponentsCommunication/Leader'
import Customer from '@/pages/Practice/ComponentsCommunication/Customer'

import './index.less'

const ComponentsCommunication = (props: any) => {

  const [type, setType] = useState('leader')
  // 如果函数没有被销毁或者强制重新渲染，useState 赋值只会执行一次
  const [userInfo, setUserInfo] = useState({
    userName: '',
    age: 0,
    userType: '',
    sex: 1,
  })
  const [state1, setState1] = useState(1)
  const [state2, setState2] = useState(2)
  const [state3, setState3] = useState(3)
  const [state4, setState4] = useState(4)
  const [state5, setState5] = useState(5)
  const [state6, setState6] = useState(6)

  // 延迟执行，在页面预渲染一次之后执行
  useEffect(() => {
    // 如果 callback 函数里面有能够使 app 组件重新渲染的语句，那么就需要 加上 []
    setUserInfo(fetchUserInfo(type))
  }, [type])
  // 如果[] 里面的值跟之前的值 完全相等！！！ {} ，那么就不会再次执行，只会执行一次
  // 如果[] 里面的值跟之前的值 不完全相等，那么就会再次执行，只能是 state 类型/引用类型

  useEffect(() => {
    console.log(userInfo)
  }, [userInfo])

  useEffect(() => {
    setState()
    console.log('setState函数被执行了一次');
    // 问一下，这个打印会打印几次6，ok
    // 一直在打印，这是为什么呢？有个印象就行，说回这个设计的思路
  }, [type])

  const setState = () => {
    setState1(state1+1)
    setState2(state2+1)
    setState3(state3+1)
    setState4(state4+1)
    setState5(state5+1)
    setState6(state6+1)
  }

  console.log('当组件重新渲染就会触发我') // 这个会打印几次1，也就是说，setState里面 执行了很多个 setStatex，如果每次 执行了 setStatex 就改变 x 的值，就会刷新 x 次也就是6 次
  // 这里把6次 setState 变成了一次，节省了 5 倍的时间，所以它会有个控制系统，来判断这个state 后面有没有一起的，就像公交车一样的，每隔一段时间发车一次，会带上所有需要执行的setState 一起执行
  // 这也就是为啥，你的 setState 没办法直接拿到想要的值，因为你提前到了站等着你朋友下车，但是他还没发车呢。。。

  // 他是否会重复执行
  const fetchUserInfo = (type: string) => {
    if (type === 'leader') {
      return {
        userName: 'qingzi',
        age: 20,
        userType: 'leader',
        sex: 0,
      }
    } else {
      return {
        userName: 'lijia',
        age: 18,
        userType: 'customer',
        sex: 1,
      }
    }
  }

  return <div className=''>
    <Button onClick={() => { setType('leader') }}>切换到Leader角色</Button>
    <Button onClick={() => { setType('customer') }}>切换到Customer角色</Button>
    {userInfo.userName}
    {userInfo.userType === 'leader' && <Leader userName={userInfo.userName} />}
    {userInfo.userType === 'customer' && <Customer userName={userInfo.userName} />}
  </div>
}

export default ComponentsCommunication
